<template>
  <div :class="'a-tag tag-' + type" :style="`${color ? 'background-color: ' + color : ''}`">
    {{ name }}
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: "",
    },
    type: {
      type: "default" | "warning" | "error" | "success",
      default: "default",
    },
    color: {
      type: String,
      default: "",
    },
  },
};
</script>
<style scoped>
.a-tag {
  padding: 2px 4px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.tag-default {
  background-color: #4279ca;
}

.tag-warning {
  background-color: #dfb55a;
}

.tag-error {
  background-color: #dd3b3b;
}

.tag-success {
  background-color: #69ca42;
}
</style>